<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 100%; height:100%"></div>
  <script>
    Cesium.Ion.defaultAccessToken = '<CESIUM_ACCESS_TOKEN>';
    var viewer = new Cesium.Viewer('cesiumContainer', {
    skyBox : false,
    skyAtmosphere: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    shouldAnimate : true,
    contextOptions : {
        webgl: {
            alpha: true
        }
    }
});

var scene = viewer.scene;
scene.backgroundColor = Cesium.Color.WHITE;
scene.highDynamicRange = false;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
    canvas.focus();
};
var ellipsoid = scene.globe.ellipsoid;
var globe = viewer.scene.globe;
globe.imageryLayers.removeAll();
globe.baseColor = Cesium.Color.fromCssColorString('#f7fbff');

var tonerLayer = globe.imageryLayers.addImageryProvider(
    Cesium.createOpenStreetMapImageryProvider({
        url : 'https://stamen-tiles.a.ssl.fastly.net/toner-background/',
        credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
    })
);
tonerLayer.alpha = 0.3;
tonerLayer.brightness = 3;
tonerLayer.contrast = 0.7;

